<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>登录页面</title>
	<%@ include file="../common.jsp" %>
	<link rel="stylesheet" href="${path }/resource/css/main.css" type="text/css" />
	<script type="text/javascript" src="${path }/resource/plugins/jcarousel/jquery.jcarousel.min.js"></script>
	<link rel="stylesheet" href="${path }/resource/plugins/jcarousel/jcarousel-tango.css" type="text/css" />
	<style type="text/css">
		#con_catalog{
			background:#eee;
			border: 1px solid #AAAAAA;
			width:200px;
			float:left;
			margin-right:8px;
		}
		#tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;
}
		#con_pic{
		    background: none repeat scroll 0 0 #EEEEEE;
		    border: 1px solid #AAAAAA;
		    float: left;
		    width: 586px;
		    margin-right:8px;
		    height:150px; 
			overflow:hidden;
			position:relative;
			margin-bottom:10px;
		}
		#con_pic .slider,#con_pic .num{
			position:absolute;
		}
		#con_pic .slider li{ 
			list-style:none;
			display:inline;
		}
		#con_pic .slider img{ 
			width:586px; 
			height:150px;
			display:block;
		}
		#con_pic .num{ 
			right:5px; 
			bottom:5px;
		}
		#con_pic .num li{
			float: left;
			color: #FF7300;
			text-align: center;
			line-height: 16px;
			width: 16px;
			height: 16px;
			font-family: Arial;
			font-size: 12px;
			cursor: pointer;
			overflow: hidden;
			margin: 3px 1px;
			border: 1px solid #FF7300;
			background-color: #fff;
		}
		#con_pic .num li.on{
			color: #fff;
			line-height: 21px;
			width: 21px;
			height: 21px;
			font-size: 16px;
			margin: 0 1px;
			border: 0;
			background-color: #FF7300;
			font-weight: bold;
		}
		#con_news{
		    background: none repeat scroll 0 0 #EEEEEE;
		    border: 1px solid #AAAAAA;
		    float: right;
		    width: 190px;
		    position:relative;
		}
		#con_news h3 { 
			height:26px; 
			background:#3B5998;
			color:#FFF; 
			line-height:26px; 
			text-indent:6px;
		}
		#con_news ul { 
			padding:5px 0 5px 15px; 
		}
		#con_news .scrollNews{
			width:190px;
			height:124px;
			line-height:20px;
			overflow:hidden;
			background:#FFFFFF;
		}
		.module_up_down{ 
			position:absolute; 
			top:5px; 
			right:10px; 
			cursor:pointer;
		}
		#con_news.scrollNews li{
			height:20px;
		}
		
		#con_catalog{
		position:relative;
	background:#EEEEEE;
		}
		
		#con_catalog ul { 
	padding:5px 0 5px 15px; 
}
		#con_catalog h3 { 
	height:26px; 
	background:#3B5998;
	color:#FFF; 
	line-height:26px; 
	text-indent:6px;
}
		#con_catalog .m-treeview{
    background:#FFFFFF;
}
#con_catalog .m-treeview li span {
    cursor: pointer;
}
#con_catalog .m-treeview li.m-expanded {
	padding-left:16px;
	background:url('${path}/resource/images/treeview-expanded.gif') no-repeat 0 0;
}
#con_catalog .m-treeview li.m-expanded ul li {
   list-style-image: url('${path}/resource/images/treeview-item.gif');
}
#con_catalog .m-treeview li.m-collapsed {
    padding-left:16px;
    background:url('${path}/resource/images/treeview-collapsed.gif') no-repeat 0 0;
}
#con_catalog .m-treeview li.m-collapsed ul{
    display:none;
}

#scrolltop {
position: fixed;
bottom: 100px;
display: block;
margin: -30px 0 0;
width: 26px;
height: 50px;
background: url('${path}/resource/images/scrolltop.png') no-repeat 50% 0;
line-height: 999px;
overflow: hidden;
cursor: pointer;
}
	</style>
	<script type="text/javascript">


	jQuery(document).ready(function() {

	    jQuery('#mycarousel').jcarousel({
	    	auto:5
	    });

	});



	/*首页广告效果*/
	$(function(){
	     var len  = $("#con_pic .num > li").length;
		 var index = 0;
		 var adTimer;
		 $("#con_pic .num li").mouseover(function(){
			index  =   $("#con_pic .num li").index(this);
			showImg(index);
		 }).eq(0).mouseover();	
		 //滑入 停止动画，滑出开始动画.
		 $("#con_pic").hover(function(){
				 clearInterval(adTimer);
			 },function(){
				 adTimer = setInterval(function(){
				    showImg(index);
					index++;
					if(index==len){index=0;}
				  } , 3000);
		 }).trigger("mouseleave");
		 
		 
		 
		    var x = 10;  
			var y = 20;
			$("a.tooltip").mouseover(function(e){
		       	this.myTitle = this.title;
				this.title = "";	
			    var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>"; //创建 div 元素
				$("body").append(tooltip);	//把它追加到文档中
				$("#tooltip")
					.css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x)  + "px"
					}).show("fast");	  //设置x坐标和y坐标，并且显示
		    }).mouseout(function(){		
				this.title = this.myTitle;
				$("#tooltip").remove();   //移除 
		    }).mousemove(function(e){
				$("#tooltip")
					.css({
						"top": (e.pageY+y) + "px",
						"left": (e.pageX+x)  + "px"
					});
			});
			
			
			
			$(window).scroll( function() { 
				var scrollHeight = parseInt(document.body.getBoundingClientRect().top);
				if (scrollHeight < -100) {
					var basew = parseInt($("#footer").width());
					var sw = $("#scrolltop").width();
					var left = $("#footer").offset().left;
					left = (left < sw ? left * 2 - sw : left)+basew;
					$("#scrolltop").css("left",left+"px");
					$("#scrolltop").show();
				} else {
					$("#scrolltop").hide();
				}
				
			} );
	});
	// 通过控制top ，来显示不同的幻灯片
	function showImg(index){
	        var adHeight = $("#con_pic").height();
			$("#con_pic .slider").stop(true,false).animate({top : -adHeight*index},1000);
			$("#con_pic .num li").removeClass("on").eq(index).addClass("on");
	}
	
	
	
	/*新闻滚动*/
	$(function(){
	        var $this = $(".scrollNews");
			var scrollTimer;
			$this.hover(function(){
				  clearInterval(scrollTimer);
			 },function(){
			   scrollTimer = setInterval(function(){
							 scrollNews( $this );
						}, 3000 );
			}).trigger("mouseleave");
	});
	function scrollNews(obj){
	   var $self = obj.find("ul:first"); 
	   var lineHeight = $self.find("li:first").height(); //获取行高
	   $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){
	         $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
	   })
	}
	
	
	$(function(){
		   $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 (  >  )
				    var $ul = $(this).siblings("ul");
					if($ul.is(":visible")){
						$(this).parent().attr("class","m-collapsed");
						$ul.hide();
					}else{
						$(this).parent().attr("class","m-expanded");
						$ul.show();
					}
					return false;
		   })
	})
	</script>

</head>
<body>
	<div id="header">
		<a id="logo" href="#"></a>
		<div id="userbar">
			欢迎您，张银友
			<a href="">登录</a>&nbsp;|&nbsp;<a href="">注册</a>&nbsp;|&nbsp;<a href="">退出</a>&nbsp;|&nbsp;<a href="">欢迎</a>&nbsp;|
		</div>
		<div id="daymsg">
			开开心心每一天
		</div>
		<ul id="skin">
			<li id="skin_0" title="蓝色" class="selected">蓝色</li>
			<li id="skin_1" title="紫色">紫色</li>
			<li id="skin_2" title="红色">红色</li>
			<li id="skin_3" title="天蓝色">天蓝色</li>
			<li id="skin_4" title="橙色">橙色</li>
			<li id="skin_5" title="淡绿色">淡绿色</li>
		</ul>
	</div>
	<div id="navigation">
		<ul>
			 <li><a href="#">首 页</a></li>
			 <li><a href="#">衬 衫</a>
					<ul>
						 <li><a href="#">短袖衬衫</a></li>
						 <li><a href="#">长袖衬衫</a></li>
						 <li><a href="#">无袖衬衫</a></li>
					</ul>
			</li>
			<li><a href="#">卫 衣</a>
					<ul>
						 <li><a href="#">开襟卫衣</a></li>
						 <li><a href="#">套头卫衣</a></li>
					</ul>
			 </li>
			<li><a href="#">裤 子</a>
					<ul>
						 <li><a href="#">休闲裤</a></li>
						 <li><a href="#">卡其裤</a></li>
						 <li><a href="#">牛仔裤</a></li>
	                     <li><a href="#">短裤</a></li>
	                </ul>
	         </li>
			 <li><a href="#">联系我们</a></li>
		</ul>
	</div>
	<div id="content">
		<div id="con_catalog">
			<h3>产品分类</h3>
			<ul class="m-treeview">
				<li class="m-expanded">
					<span>衬衫</span>
					<ul>
						<li><span>短袖衬衫</span></li>
						<li><span>长袖衬衫</span></li>	
					</ul>
				</li>
				<li class="m-expanded">
					<span>卫衣</span>
					<ul>
						<li ><span>开襟卫衣</span></li>
						<li ><span>套头卫衣</span></li>	
					</ul>
				</li>
				<li class="m-expanded">
					<span>裤子</span>
					<ul>
						<li><span>休闲裤</span></li>
						<li><span>免烫卡其裤</span></li>	
						<li><span>牛仔裤</span></li>
						<li><span>短裤</span></li>
					</ul>
				</li>
		   </ul>
		</div>
		<div id="con_pic">
			 <ul class="slider" >
				<li><img src="${path }/resource/images/ads/1.gif"/></li>
				<li><img src="${path }/resource/images/ads/2.gif"/></li>
				<li><img src="${path }/resource/images/ads/3.gif"/></li>
				<li><img src="${path }/resource/images/ads/4.gif"/></li>
				<li><img src="${path }/resource/images/ads/5.gif"/></li>
			  </ul>
			  <ul class="num" >
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			  </ul>
		</div>
		<div id="con_news">
			<h3>最新动态</h3>
			<div class="scrollNews" >
				<ul>
					<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
					<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
					<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
					<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
					<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
					<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
					<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
				</ul>
			</div>
			<p class="module_up_down"><img src="${path }/resource/images/more.gif" alt="" /></p>
		</div>
		<div style="float: left;">
			<ul id="mycarousel" class="jcarousel-skin-tango">
			    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="96" height="110" alt="" /></li>
			    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="96" height="110" alt="" /></li>
			  </ul>
		</div>
	</div>
	<div id="footer">
		<a href="http://www.tencent.com/">关于腾讯</a>
		|
		<a href="http://www.tencent.com/index_e.shtml">About Tencent</a>
		|
		<a href="http://www.qq.com/contract.shtml">服务条款</a>
		|
		<a href="http://open.qq.com/">开放平台</a>
		|
		<a href="http://www.tencentmind.com/">广告服务</a>
	</div>
	<span id="scrolltop" onclick="window.scrollTo('0','0')" style="display:none;">回顶部</span>
		<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v2.jiathis.com/code/jiathis_r.js?type=left&amp;move=0&amp;btn=l3.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->
</body>
</html>
